<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog
      width="918px"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      custom-class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div slot="title" class="clearfix">
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前状态：</span>
                <span
                  class="status-circle"
                  :style="{ background: getHeadColor(data.stateCode) }"
                ></span>
                <span class="title_value">
                  {{ getHeadName(data.stateCode) }}
                </span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>车台号：</span>
                <span class="title_value">{{ info.devSn }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>品种：</span>
                <span class="title_value">{{
                  Math.round(Math.random() * 1) == 0
                    ? ' R80/T20 AA'
                    : 'T50/R50 AA'
                }}</span>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>总产：</span>
                <span class="title_value"
                  >{{ !info.zcd || info.zcd == 'None' ? 0 : info.zcd }}米</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>当前班产：</span>
                <span class="title_value"
                  >{{
                    (Math.floor(Math.random() * 5) * 0.1).toFixed(2)
                  }}吨</span
                >
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <el-col :span="24">
              <div class="echarts">
                <div
                  ref="lulotongEcharts1"
                  style="width: 100%; height: 100%"
                ></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="7">
          <el-row>
            <el-col :span="24">
              <div class="echarts">
                <div
                  ref="lulotongEcharts2"
                  style="width: 100%; height: 100%"
                ></div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>速度：</span>
                <span class="title_value"
                  >{{ !info.sd || info.sd == 'None' ? 0 : info.sd }}米/分</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>余长：</span>
                <span class="title_value"
                  >{{ !info.yc || info.yc == 'None' ? 0 : info.yc }}米</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>低速速度：</span>
                <span class="title_value"
                  >{{
                    !info.dssd || info.dssd == 'None' ? 0 : info.dssd
                  }}米/分</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>满筒长度：</span>
                <span class="title_value"
                  >{{ !info.dc || info.dc == 'None' ? 0 : info.dc }}米</span
                >
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="title_item">
                <span>挡车工：</span>
                <span class="title_value">{{
                  this.peopleList[Math.round(Math.random() * 40)].dcg
                }}</span>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-row type="flex">
            <div class="table-column">专件更换</div>
            <el-table
              border
              :data="tableData"
              style="width: 100%"
              height="150"
              size="mini"
              :header-cell-style="{
                background: '#F8F9FB',
                color: '#292B3D',
                fontWeight: 'normal'
              }"
            >
              <el-table-column
                prop="code"
                label="专件编码"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="desc"
                label="专件描述"
                min-width="14%"
              ></el-table-column>
              <el-table-column
                prop="date"
                label="上车时间"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="num"
                label="数量"
                min-width="10%"
              ></el-table-column>
              <el-table-column
                prop="day"
                label="剩余天数"
                min-width="14%"
              ></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row type="flex">
            <div class="table-column">维护计划</div>
            <el-table
              border
              :data="table1Data"
              style="width: 100%"
              height="150"
              size="mini"
              :header-cell-style="{
                background: '#F8F9FB',
                color: '#292B3D',
                fontWeight: 'normal'
              }"
            >
              <el-table-column
                prop="whlx"
                label="维护类型"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="dqjh"
                label="当前计划"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="sfwc"
                label="是否完成"
                min-width="20%"
              ></el-table-column>
              <el-table-column
                prop="xcjh"
                label="下次计划"
                min-width="20%"
              ></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import people from '@/views/Workshop/components/data/people.json';
export default {
  name: 'dialog_jingtiao',
  data() {
    return {
      info: {},
      Dialog: false,
      title: '',
      peopleList: [],
      title_l: '',
      ctsd: 0,
      xiaoLv: 0,
      data: '',
      tableData: [
        {
          code: 'ZK101',
          desc: '并条',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },
        {
          code: 'ZK101',
          desc: '并条',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },

        {
          code: 'ZK101',
          desc: '并条',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        },

        {
          code: 'ZK101',
          desc: '并条',
          date: '2021-08-03 15:20:06',
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        },
        {
          whlx: '保养及维护',
          dqjh: '2021-07-31',
          sfwc: '否',
          xcjh: '2021-07-31'
        }
      ]
    };
  },

  created() {
    this.peopleList = people;
  },
  computed: {
    bingTiaoNewestState() {
      return this.$store.state.workshop.bingTiaoNewestState;
    }
  },
  watch: {
    bingTiaoNewestState: {
      immediate: true,
      handler(val) {
        if (val.data) {
          this.info = val.data;
          this.info.stateCode = this.getHeadName(val.data.stateCode);
          this.ctsd = parseInt(val.data.sd);
          this.$nextTick(() => {
            this.init1();
            this.init2();
          });
        }
      }
    }
  },
  methods: {
    //尾灯表示车台状态（运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return '#7CBC44';
        //停止
        case 2:
          return '#888F93';
        //故障
        case 3:
          return '#6D000E';
        //满纱满桶
        case 4:
          return '#ECCD54';
        //通讯失败
        case 5:
          return '#EB4E27';
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return '运行';
        //停止
        case 2:
          return '停止';
        //故障
        case 3:
          return '故障';
        //满纱满桶
        case 4:
          return '满纱满桶';
        //通讯失败
        case 5:
          return '通讯故障';
      }
    },
    closeDialog() {
      this.$parent.closeHandle('secBingTiaoTimer');
    },
    showDialog(data) {
      this.data = data;
      var title =
        Number(data.devSn) > 99
          ? '末并条机' + (Number(data.devSn) - 100)
          : '头并条机' + Number(data.devSn);
      this.title = title + 'JWF1009 详情';
      this.title_l = title;
      this.xiaoLv = Number(data.xiaolv) * 100;
      this.Dialog = true;
    },
    init1() {
      if (this.$refs.lulotongEcharts1) {
        var lulotongEcharts1 = this.$echarts.init(this.$refs.lulotongEcharts1);
        let getmax = 500;
        let getvalue = this.ctsd ? this.ctsd : 0;
        let option = {
          title: [
            {
              text: '出条速度',
              bottom: 50,
              left: 'center',
              textStyle: {
                color: '#292B3D',
                fontSize: 16,
                fontWeight: 500
              }
            },
            {
              text: '{b|' + getvalue + '}' + '{a|M/min}',
              left: 'center',
              top: 'center',
              textStyle: {
                rich: {
                  a: {
                    fontSize: 16,
                    color: '#292B3D'
                  },
                  b: {
                    fontSize: 26,
                    color: '#292B3D'
                  }
                }
              }
            }
          ],
          angleAxis: {
            show: false,
            max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 225, //极坐标初始角度
            splitLine: {
              show: false
            }
          },
          barMaxWidth: 18, //圆环宽度
          radiusAxis: {
            show: false,
            type: 'category'
          },
          //圆环位置和大小
          polar: {
            center: ['50%', '50%'],
            radius: '140%'
          },
          series: [
            {
              type: 'bar',
              data: [
                {
                  //上层圆环，显示数据
                  value: getvalue,
                  itemStyle: {
                    color: '#2C60A6'
                  }
                }
              ],
              barGap: '-100%', //柱间距离,上下两层圆环重合
              coordinateSystem: 'polar',
              roundCap: true, //顶端圆角
              z: 3 //圆环层级，同zindex
            },
            {
              //下层圆环，显示最大值
              type: 'bar',
              data: [
                {
                  value: getmax,
                  itemStyle: {
                    color: '#D8DEE4',
                    opacity: 0.2,
                    borderWidth: 0
                  }
                }
              ],
              barGap: '-100%',
              coordinateSystem: 'polar',
              roundCap: true,
              z: 1
            },

            {
              name: '外部刻度',
              type: 'gauge',
              radius: '105%',
              min: 0, //最小刻度
              max: getmax, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#292B3D',
                distance: 25
              }, //刻度标签。
              axisTick: {
                show: false,
                splitNumber: 7,
                lineStyle: {
                  color: '#C7CBCF', //用颜色渐变函数不起作用
                  opacity: 0.6,
                  width: 2
                },
                length: -8
              }, //刻度样式
              splitLine: {
                show: false,
                length: -20,
                lineStyle: {
                  color: '#C7CBCF' //用颜色渐变函数不起作用
                }
              }, //分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            }
          ]
        };
        lulotongEcharts1.setOption(option);
        window.addEventListener('resize', function() {
          lulotongEcharts1.resize();
        });
      }
    },
    init2() {
      if (this.$refs.lulotongEcharts2) {
        var lulotongEcharts2 = this.$echarts.init(this.$refs.lulotongEcharts2);
        let getmax = 100;
        let getvalue = this.xiaoLv ? this.xiaoLv : 0;
        let option = {
          title: [
            {
              text: '效率',
              bottom: 50,
              left: 'center',
              textStyle: {
                color: '#292B3D',
                fontSize: 16,
                fontWeight: 500
              }
            },
            {
              text: '{b|' + Math.round(getvalue) + '}' + '{a|%}',
              left: 'center',
              top: 'center',
              textStyle: {
                rich: {
                  a: {
                    fontSize: 16,
                    color: '#292B3D'
                  },
                  b: {
                    fontSize: 26,
                    color: '#292B3D'
                  }
                }
              }
            }
          ],
          angleAxis: {
            show: false,
            max: (getmax * 360) / 270, //-45度到225度，二者偏移值是270度除360度
            type: 'value',
            startAngle: 225, //极坐标初始角度
            splitLine: {
              show: false
            }
          },
          barMaxWidth: 18, //圆环宽度
          radiusAxis: {
            show: false,
            type: 'category'
          },
          //圆环位置和大小
          polar: {
            center: ['50%', '50%'],
            radius: '140%'
          },
          series: [
            {
              type: 'bar',
              data: [
                {
                  //上层圆环，显示数据
                  value: getvalue,
                  itemStyle: {
                    color: '#75FB67'
                  }
                }
              ],
              barGap: '-100%', //柱间距离,上下两层圆环重合
              coordinateSystem: 'polar',
              roundCap: true, //顶端圆角
              z: 3 //圆环层级，同zindex
            },
            {
              //下层圆环，显示最大值
              type: 'bar',
              data: [
                {
                  value: getmax,
                  itemStyle: {
                    color: '#D8DEE4',
                    opacity: 0.2,
                    borderWidth: 0
                  }
                }
              ],
              barGap: '-100%',
              coordinateSystem: 'polar',
              roundCap: true,
              z: 1
            },

            {
              name: '外部刻度',
              type: 'gauge',
              radius: '105%',
              min: 0, //最小刻度
              max: getmax, //最大刻度
              splitNumber: 10, //刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 1,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              }, //仪表盘轴线
              axisLabel: {
                show: true,
                color: '#292B3D',
                distance: 25
              }, //刻度标签。
              axisTick: {
                show: false,
                splitNumber: 7,
                lineStyle: {
                  color: '#C7CBCF', //用颜色渐变函数不起作用
                  opacity: 0.6,
                  width: 2
                },
                length: -8
              }, //刻度样式
              splitLine: {
                show: false,
                length: -20,
                lineStyle: {
                  color: '#C7CBCF' //用颜色渐变函数不起作用
                }
              }, //分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            }
          ]
        };
        lulotongEcharts2.setOption(option);
        window.addEventListener('resize', function() {
          lulotongEcharts2.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 250px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
